<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Morphing Buttons Concept | Demo 4</title>
		<meta name="description" content="Morphing Buttons Concept: Inspiration for revealing content by morphing the action element" />
		<meta name="keywords" content="expanding button, morph, modal, fullscreen, transition, ui" />
		<link rel="shortcut icon" href="../favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<link rel="stylesheet" type="text/css" href="css/content.css" />
		<script src="js/modernizr.custom.js"></script>
	</head>
	<body>
		<div class="container demo-4">
			<!-- Top Navigation -->
			<div class="codrops-top clearfix">
				<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/PageLoadingEffects/"><span>Previous Demo</span></a>
				<span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=19004"><span>Back to the Codrops Article</span></a></span>
			</div>
			<header class="codrops-header">
				<h1>Morphing Buttons Concept</h1>
				<p>Inspiration for revealing content by morphing the action element. Examples:</p>
				<nav class="codrops-demos">
					<a href="index.html">Login/Signup</a>
					<a href="index2.html">Terms</a>
					<a href="index3.html">Info Overlay</a>
					<a class="current-demo" href="index4.html">Subscribe</a>
					<a href="index5.html">Share</a>
					<a href="index6.html">Video Player</a>
					<a href="index7.html">Sidebar Settings</a>
				</nav>
			</header>
			<section>
				<div class="mockup-content">
					<p>Kohlrabi radish okra azuki bean corn fava bean mustard tigernut.</p>
					<div class="morph-button morph-button-inflow morph-button-inflow-1">
						<button type="button"><span>Subscribe to our Newsletter</span></button>
						<div class="morph-content">
							<div>
								<div class="content-style-form content-style-form-4">
									<h2 class="morph-clone">Subscribe to our Newsletter</h2>
									<form>
										<p><label>Your Email Address</label><input type="text"/><span>We promise, we won't send you any spam. Just love.</span></p>
										<p><button>Subscribe me</button></p>
									</form>
								</div>
							</div>
						</div>
					</div><!-- morph-button -->
					<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale.</p>
				</div>
			</section>
			<section class="related">
				<p>If you enjoyed this demo you might also like:</p>
				<a href="http://tympanus.net/Development/ProgressButtonStyles/">
					<img src="http://tympanus.net/codrops/wp-content/uploads/2013/12/ProgressButtonStyles-300x162.png" />
					<h3>Progress Button Styles</h3>
				</a>
				<a href="http://tympanus.net/Development/SidebarTransitions/">
					<img src="http://tympanus.net/codrops/wp-content/uploads/2013/08/sidebartransitions-300x162.png" />
					<h3>Sidebar Transitions</h3>
				</a>
			</section>
		</div><!-- /container -->
		<script src="js/classie.js"></script>
		<script src="js/uiMorphingButton_inflow.js"></script>
		<script>
			(function() {
				new UIMorphingButton( document.querySelector( '.morph-button' ) );

				// for demo purposes only
				[].slice.call( document.querySelectorAll( 'form button' ) ).forEach( function( bttn ) { 
					bttn.addEventListener( 'click', function( ev ) { ev.preventDefault(); } );
				} );
			})();
		</script>
	</body>
</html>